<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<header th:replace="user/header::header-fragment">
</header>
<body class="hold-transition sidebar-mini">
<div class="wrapper">
    <!-- 引入页面头header-fragment -->
    <div th:replace="user/header::header-nav"></div>
    <!-- 引入工具栏sidebar-fragment -->
    <div th:replace="user/sidebar::sidebar-fragment(${path})"></div>
    <!-- Content Wrapper. Contains 图标content -->
    <div class="content-wrapper">
        <!-- Content Header (图标header) -->
        <div class="content-header">
            <div class="container-fluid">
            </div><!-- /.container-fluid -->
        </div>
        <!-- Main content -->
        <div class="content">
            <div class="container-fluid">
                <div class="card card-primary card-outline">
                    <div class="card-header">
                        <h3 class="card-title">发布文章</h3>
                    </div>
                    <!-- /.card-body -->
                    <div class="card-body">
                        <form action="/user/blogs/save" method="POST" id="blogForm">
                            <div class="form-group">
                                <div class="alert alert-danger"  style="display: none;">
                                    错误信息展示栏。
                                </div>
                            </div>
                            <input type="hidden" name="blogViews" value="0">
                            <input type="hidden" name="isTop" value="0">
                            <input type="hidden" name="isDeleted" value="0">
                            <input type="hidden"name="createTime" id="createTime">
                            <div class="form-group">
                                <label for="blogTitle" class="control-label">文章标题:</label><br>
                                <input type="text" id="blogTitle" name="blogTitle"  class="form-control" required><br>

                                <label for="blogSubUrl" class="control-label">子链接:</label><br>
                                <input type="text" id="blogSubUrl" name="blogSubUrl"class="form-control" required><br>

                                <label for="blogCoverImage" class="control-label">封面图片:</label><br>
                                <!-- In a real scenario, you'd have a file input here -->
                                <input type="file" id="blogCoverImage" name="blogCoverImage"><br><br>
                                <!-- Consider adding a preview functionality with JavaScript -->

                                <label for="blogContent" class="form-label" >文章内容:</label><br>
                                <textarea id="blogContent" name="blogContent" rows="5" class="form-control" required></textarea><br>

                                <label for="blogCategoryName" class="form-label" >类别名称:</label><br>
                                <input type="text" id="blogCategoryName" name="blogCategoryName"  class="form-control" required><br>

                                <label for="blogTags" class="form-label" >标签 (用逗号分隔):</label><br>
                                <select id="blogTags" name="blogTags"  class="form-control" required>
                                    <option value="测试">测试</option>
                                    <option value="java">java</option>
                                    <option value="python">python</option>
                                    <option value="运维">运维</option>
                                    <!-- 添加更多选项... -->
                                    <option value="其他">其他</option>
                                </select><br>
                                <label for="blogStatus" class="form-label" >文章状态:</label><br>
                                <select id="blogStatus" name="blogStatus" class="form-control">
                                    <option value="0">草稿</option>
                                    <option value="1">已发布</option>
                                </select><br>
                                <select id="enableComment" name="enableComment" class="form-control">
                                    <option value="0">允许评论</option>
                                    <option value="1">不允许评论</option>
                                </select>
                            </div>
                            <div class="modal-footer">
                                <input type="submit" class="btn btn-primary" value="提交" id="submitBlog" disabled>
                                <button type="button" class="btn btn-secondary" id="checkBtn">检查</button>
                            </div>

                        </form>
                    </div>
                    <!-- /.card-body -->
                </div>
            </div><!-- /.container-fluid -->
        </div>
        <!-- /.content -->
        <div class="content">
            <div class="modal" tabindex="-1" role="dialog" id="warningModal">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">警告</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            请确保所有必填项都已填写。
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-primary" data-dismiss="modal">确定</button>
                        </div>
                    </div>
                </div>
            </div>
        <div class="content">
            <!-- 在原先模态内容的位置，正式定义模态框结构 -->
            <div class="modal fade" id="categoryModal" tabindex="-1" role="dialog" aria-labelledby="categoryModalLabel" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="categoryModalLabel">确认发布文章</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <p>您确定要发布这篇文章吗？</p>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                            <button type="button" class="btn btn-primary" id="confirmSubmit">确认发布</button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- /.modal -->
        </div>
    </div>
    </div>
    <!-- /.content-wrapper -->
    <!-- 引入页脚footer-fragment -->
    <div th:replace="user/footer::footer-fragment"></div>
</div>
<!-- jQuery -->
<script th:src="@{/user/plugins/jquery/jquery.min.js}"></script>
<!-- jQuery UI 1.11.4 -->
<script th:src="@{/user/plugins/jQueryUI/jquery-ui.min.js}"></script>
<!-- Bootstrap 4 -->
<script th:src="@{/user/plugins/bootstrap/js/bootstrap.bundle.min.js}"></script>
<!-- AdminLTE App -->
<script th:src="@{/user/dist/js/adminlte.min.js}"></script>
<!-- jqgrid -->
<script th:src="@{/user/plugins/jqgrid-5.5.2/jquery.jqGrid.min.js}"></script>
<script th:src="@{/user/plugins/jqgrid-5.5.2/grid.locale-cn.js}"></script>
<!-- image-picker -->
<script th:src="@{/user/plugins/image-picker/query.masonry.min.js}"></script>
<script th:src="@{/user/plugins/image-picker/image-picker.min.js}"></script>
<!-- sweetalert -->
<script th:src="@{/user/plugins/sweetalert/sweetalert.min.js}"></script>
<script th:src="@{/user/dist/js/public.js}"></script>
<script th:src="@{/user/dist/js/blogmanage.js}"></script>
<script>
    function getDate(){
        var date = new Date();
        document.getElementById("createTime").value=date;
    }
</script>
<script>
    document.getElementById("submitBlog").addEventListener("click", function() {
        $('#categoryModal').modal('show'); // 显示模态框
    });

    document.getElementById("confirmSubmit").addEventListener("click", function() {
        getDate(); // 获取当前时间并设置到createTime字段
        document.getElementById("blogForm").submit(); // 提交表单
    });
</script>
<script>
    document.getElementById("submitBlog").addEventListener("click", function(event) {
        event.preventDefault(); // Prevent default form submission

        // Validation logic
        const blogTitle = document.getElementById("blogTitle");
        const blogSubUrl = document.getElementById("blogSubUrl");
        const blogContent = document.getElementById("blogContent");
        const blogCategoryName = document.getElementById("blogCategoryName");
        const blogTags = document.getElementById("blogTags");

        const isFormValid = blogTitle.value && blogSubUrl.value && blogContent.value && blogCategoryName.value && blogTags.value;

        if (isFormValid) {
            // Enable submit button if not already enabled (in case it was previously disabled)
            this.disabled = false;

            // All required fields are filled, show the modal
            $('#categoryModal').modal('show');
        } else {
            // Disable submit button if fields are empty
            this.disabled = true;
        }
    });

    // Assuming you want to re-enable the button after fields are filled and before confirming submission
    // You might listen to 'input' events on each field to dynamically enable/disable the button.
    ["blogTitle", "blogSubUrl", "blogContent", "blogCategoryName", "blogTags"].forEach(fieldName => {
        document.getElementById(fieldName).addEventListener("input", function() {
            const submitButton = document.getElementById("submitBlog");
            const isAnyFieldEmpty = !["blogTitle", "blogSubUrl", "blogContent", "blogCategoryName", "blogTags"].every(field => document.getElementById(field).value);
            submitButton.disabled = isAnyFieldEmpty;
        });
    });

    document.getElementById("confirmSubmit").addEventListener("click", function() {
        getDate(); // 获取当前时间并设置到createTime字段
        document.getElementById("blogForm").submit(); // 提交表单
    });
</script>
<script>    // Get all the required form controls
const requiredInputs = document.querySelectorAll('.form-group [required]');

// Function to check if all required fields are filled
function areAllFieldsFilled() {
    return Array.from(requiredInputs).every(input => input.value.trim() !== '');
}

// Add event listeners to all required inputs
requiredInputs.forEach(input => {
    input.addEventListener('input', function() {
        // Enable or disable the submit button based on the status of required fields
        document.getElementById('submitBlog').disabled = !areAllFieldsFilled();
    });
});
</script>
    <script>    // Get the check button and modal elements
    const checkButton = document.getElementById('checkBtn');
    const warningModal = new bootstrap.Modal(document.getElementById('warningModal'));

    // Function to check if any required field is empty
    function checkForEmptyFields() {
        return Array.from(requiredInputs).some(input => input.value.trim() === '');
    }

    // Event listener for the check button
    checkButton.addEventListener('click', function() {
        if (checkForEmptyFields()) {
            // If any required field is empty, show the warning modal
            warningModal.show();
        } else {
            // Optionally, you can display a success message or perform other actions here
            alert("所有必填项已填写！");
        }
    });
    </script>



</div>
</body>
</html>
